<template>
  <div id="app">
    <router-view />
    <theme-picker />
    <el-dialog title="温馨提示" :visible.sync="commonDialog" width="500px" append-to-body :close-on-click-modal='false'>
      您有新的订单信息
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="clickViewOrder">查看订单</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- <printe-order ref="printerOrder" /> -->
    <!-- <div style="width: 500px;height:300px;display: flex;justify-content: center;" >

      <button @click="test">测试打印信息</button>
    </div> -->
  </div>
</template>

<script>
import ThemePicker from "@/components/ThemePicker";
import PrinteOrder from '@/components/Printer'
import { getOrderList } from "./api/printe";
import dayjs from 'dayjs';

export default {
  name: "App",
  components: { ThemePicker, PrinteOrder },
  data() {
    return {
      commonDialog: false,
    }
  },
  metaInfo() {
    return {
      title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
      titleTemplate: title => {
        return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
      }
    }
  },
  mounted() {
    setInterval(() => {
      this.getCountOrder()
    }, 1000 * 30);
  },
  methods: {
    //获取订单数量
    getCountOrder() {
      const path = this.$route.path
      const startTime = dayjs().subtract(30, 'second').format('YYYY-MM-DD hh:mm:ss')
      const endTime = dayjs().format('YYYY-MM-DD hh:mm:ss')
      getOrderList({ startTime, endTime }).then(res => {
        if (res.code == 200) {
          if (res.data.length > 0) {
            if (path !== '/order/orderlist') {
              this.commonDialog = true
            }
          }
        }
      })
    },
    clickViewOrder() {
      this.$router.push({
        path: '/order/orderlist'
      })
      this.commonDialog = false
    },
    cancel() {
      this.commonDialog = false
    },
    // 和后端建立webSocket链接
    // openWebSocket() {
    //   this.$socket.onopen = () => {
    //     console.log('链接已建立');
    //   }

    //   this.$socket.onerror = (error) => {
    //     console.log('建立出现错误', error);
    //   }

    //   this.$socket.onmessage = (item) => {
    //     console.log('链接中，正在传输数据');
    //     const commit = JSON.stringify({
    //       test: '这是测试数据'
    //     })
    //     // 为服务器发送数据
    //     this.$socket.send(commit)
    //   }

    //   this.$socket.onclose = () => {
    //     console.log('链接已断开');

    //   }
    // },
  }
};
</script>
<style scoped>
#app .theme-picker {
  display: none;
}

.footer {
  width: 100%;
  margin: 100px 0;
}

.row-end {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: center;
}

.invisible-element {
  position: absolute;
  top: -9999px;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}
</style>
